<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width=650
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
  <div class="system">
    <div v-for="(item, index) in portalData" class="systemItem" :title="item.name">
      <div class="systemItem-name" :class="{'active': active === index}" @click="setSystem(index, item.id)">{{ item.name }}</div>
      <div class="triangle" v-if="active === index"></div>
    </div>
    <div class="systemItem" v-if="portalData.length < 3">
      <div class="systemItem-name" @click="relationModules()"><a-icon type="plus" />关联应用</div>
    </div>
    <div class="prev-btn prev" @click="prev" v-if="page.pageNo > 1">
      <a-icon class="prev-btn-icon" type="double-left"/>
    </div>
    <div class="prev-btn next" @click="next" v-if="portalData.length == 3">
      <a-icon class="prev-btn-icon" type="double-right"/>
    </div>
  </div>
    <span class="next"></span>
    <a-form>
      <a-form-item label='所拥有的权限'>
        <a-tree
          checkable
          @check="onCheck"
          :checkedKeys="checkedKeys"
          :treeData="treeData"
          @expand="onExpand"
          @select="onTreeNodeSelect"
          :expandedKeys="expandedKeysss"
          :checkStrictly="checkStrictly">
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作 <a-icon type="up" />
        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>

    <role-datarule-modal ref="datarule"></role-datarule-modal>
    <!-- 关联模块 -->
    <relation-module ref="Relation" @ok="refresh"></relation-module>
  </a-drawer>

</template>
<script>
  import {queryTreeListForRole,queryRolePermission,saveRolePermission} from '@/api/api'
  import RoleDataruleModal from './RoleDataruleModal.vue'
  import {getAction} from '@/api/manage'
  import RelationModule from "./RelationModule.vue";

  export default {
    name: "RoleModal",
    components:{
      RelationModule,
      RoleDataruleModal
    },
    data(){
      return {
        active: 0,
        roleId:"",
        treeData: [],
        defaultCheckedKeys:[],
        checkedKeys:[],
        expandedKeysss:[],
        allTreeKeys:[],
        autoExpandParent: true,
        checkStrictly: true,
        title:"角色权限配置",
        visible: false,
        loading: false,
        page: {
          pageNo: 1,
          pageSize: 3
        },
        pages: 0,
        portalData: [],
        allPortalData: [],
        url: {
          list: "/sys/module/queryRoleModule"
        }
      }
    },
    methods: {
      // 关联模块
      relationModules() {
        this.$refs.Relation.relation('1', this.roleId);
      },
      refresh() {
        this.page.pageNo = 1;
        this.systemList();
      },
      // 切换当前系统
      setSystem(index, id) {
        this.active = index;
        this.loadTreeData(id);
      },
      prev() {
        if (this.page.pageNo > 1) {
          this.page.pageNo--;
          this.initList();
        }
      },
      next() {
        if (this.page.pageNo < this.pages) {
          this.page.pageNo++;
          this.initList();
        } else if (this.page.pageNo == this.pages) {
          this.page.pageNo++;
          this.portalData = [];
        }
      },
      systemList() {
        getAction(this.url.list, {roleId: this.roleId}).then((res) => {
          if (res.success) {
            this.allPortalData = res.result;
            this.pages = Math.ceil(this.allPortalData.length/3);
            this.initList();
          }
        });
      },
      initList() {
        if (this.page.pageNo == this.pages) {
          this.portalData = this.allPortalData.slice((this.page.pageNo-1) * 3)
        } else if (this.page.pageNo < this.pages){
          this.portalData = this.allPortalData.slice((this.page.pageNo-1) * 3, this.page.pageNo * 3)
        }
        this.loadTreeData(this.portalData[0].id);
      },
      onTreeNodeSelect(id){
        this.$refs.datarule.show(id[0],this.roleId)
      },
      onCheck (o) {
        if(this.checkStrictly){
          this.checkedKeys = o.checked;
        }else{
          this.checkedKeys = o
        }
      },
      show(roleId){
        this.roleId=roleId
        this.page.pageNo = 1;
        this.visible = true;
      },
      close () {
        this.reset()
        this.$emit('close');
        this.visible = false;
      },
      onExpand(expandedKeys){
        this.expandedKeysss = expandedKeys;
        this.autoExpandParent = false
      },
      reset () {
        this.expandedKeysss = []
        this.checkedKeys = []
        this.defaultCheckedKeys = []
        this.loading = false
      },
      expandAll () {
        this.expandedKeysss = this.allTreeKeys
      },
      closeAll () {
        this.expandedKeysss = []
      },
      checkALL () {
        this.checkedKeys = this.allTreeKeys
      },
      cancelCheckALL () {
        //this.checkedKeys = this.defaultCheckedKeys
        this.checkedKeys = []
      },
      switchCheckStrictly (v) {
        if(v==1){
          this.checkStrictly = false
        }else if(v==2){
          this.checkStrictly = true
        }
      },
      handleCancel () {
        this.close()
      },
      handleSubmit(){
        let that = this;
        let params =  {
          roleId:that.roleId,
          permissionIds:that.checkedKeys.join(","),
          lastpermissionIds:that.defaultCheckedKeys.join(","),
        };
        that.loading = true;
        console.log("请求参数：",params);
        saveRolePermission(params).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.loading = false;
            that.close();
          }else {
            that.$message.error(res.message);
            that.loading = false;
            that.close();
          }
        })
      },
      loadTreeData(id) {
        queryTreeListForRole({moduleId: id}).then((res) => {
          this.treeData = res.result.treeList
          this.allTreeKeys = res.result.ids
          queryRolePermission({roleId:this.roleId}).then((res)=>{
            this.checkedKeys = [...res.result];
            this.defaultCheckedKeys = [...res.result];
            this.expandedKeysss = this.allTreeKeys;
            //console.log(this.defaultCheckedKeys)
          })
        })
      }
    },
  watch: {
    visible () {
      if (this.visible) {
        this.systemList();
      }
    }
  }
  }

</script>
<style lang="scss" scoped>
  .prev-btn{
    display: inline-block;
    position: absolute;
    line-height: 40px;
    cursor: pointer;
  }
  .next{
    right: 0;
  }
  .prev{
    left:0;
  }
  .system{
    width: 100%;
    position: relative;
    padding: 0 5%;
  }
  .systemItem{
    display: inline-block;
    width: 30%;
    margin-right: 5%;
    position: relative;
  }
  .systemItem-name{
    cursor: pointer;
    text-align: center;
    border: 1px solid #d5e9f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
    width: 100%;
    line-height: 20px;
  }
  .active{
    background: #62acf0;
    color: #fff;
  }
  .triangle{
    border-width: 10px;
    border-style: solid;
    border-color: #62acf0 transparent transparent;
    padding: 0px;
    width: 0px;
    height: 0px;
    left: 50%;
    position: absolute;
    margin: -1px -10px;
  }
  .systemItem:nth-child(3) {
    margin-right: 0;
  }
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>